import { useEffect, useState } from 'react'
import { Descriptions, MessagePlugin } from 'tdesign-react'
import { useLocation } from 'react-router-dom'
import { ApiRequest, apis } from '@/service'

const {
  getModuleItem,
} = apis.BMService.project

type UserType = {
  label: string
  value: string
}

type DetailsDataType = {
  moduleName: string
  moduleDesc: string
  moduleLeader: UserType[]
  moduleMember: UserType[]
  startDate: string
  endDate: string
}

const ModuleDetails = () => {

  const location = useLocation()
  const { id } = location.state

  const [detailsData, setDetailsData] = useState<DetailsDataType>({
    moduleName: '',
    moduleDesc: '',
    moduleLeader: [],
    moduleMember: [],
    startDate: '',
    endDate: '',
  })

  useEffect(() => {
    id && getModuleItemFnc()
  }, [id])

  const getModuleItemFnc = () => {
    const params = {
      id,
    }
    ApiRequest({ api: getModuleItem, params }).then((res: ResponseDataType) => {
      const { code = -1, data = [{}], note = '' } = res
      if (code > 0) {
        setDetailsData(data[0])
      } else {
        MessagePlugin.error({
          content: note,
          placement: 'top-right',
          duration: 2000
        })
      }
    })
  }

  const items = [
    {
      label: '模块名称',
      content: detailsData.moduleName || '暂无数据'
    },
    {
      label: '模块描述',
      content: detailsData.moduleDesc || '暂无数据'
    },
    {
      label: '模块负责人',
      content: detailsData.moduleLeader?.map((item: any) => item.label).join('、') || '暂无数据'
    },
    {
      label: '模块成员',
      content: detailsData.moduleMember?.map((item: any) => item.label).join('、') || '暂无数据'
    },
    {
      label: '模块开始时间',
      content: detailsData.startDate || '暂无数据'
    },
    {
      label: '模块结束时间',
      content: detailsData.endDate || '暂无数据'
    },
  ]

  return <div className={'content-wrapper'}>
   <Descriptions
      items={items}
      column={1}
      title={'模块详情'}
      bordered
    />
  </div>
}

export default ModuleDetails